<template>
    <a-modal :visible="config.visible"  :width="config.width" :footer="false"  @cancel="handleCancel">
      <template #title>
        {{config.title}}
      </template>
      <div>
        <a-descriptions size="large"  :data="data" :column="config.column"/>
      </div>
    </a-modal>
</template>
<script setup>

import {inject,ref} from "vue";
const formSearch = inject('formSearch');
const selected = inject('selected');
const config = ref({
    visible:false,
    title:'Title',
    width:'100%',
    column:4,
})

const data = ref([])

const show = (title,api,column=4,width='50%') =>{
    config.value.title = title;
    config.value.column = column;
    config.value.width = width;
    config.value.visible = true;
    getData(api);
}

const getData = async (api) =>
{
    let params;
    if(selected.value.length > 0){
        params = {ids:selected.value}
    }else{
        params = formSearch
    }
    let res = await api(params);
    data.value = res.data;
}

const handleCancel = () => {
    config.value.visible = false;
}

defineExpose({show})
</script>
